<template>
	<view class="columnbox wdh-100 content">
		<view style='background: #fff;width:100%'>
			<u--form class="wdh-100" labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<view class="info-box columnbox wdh-100">
					<view class="rowbox one-info jus" style='width: 750rpx;'>
						<!-- <view class="info-title">处方模版标题：</view> -->
						<u-form-item class="wdh-100" label-width="120" label="处方模版标题:" prop="name">
							<input placeholder-class="reg-pl" class="info-input" style="width: 100%;"
								v-model="form.name" placeholder="请输入模版标题,最多20个字" maxlength="20" />
						</u-form-item>
					</view>
				</view>
				<view class="rowbox one-info jus" style='width: 750rpx;'>
					<!-- <view class="info-title">疾病诊断：</view> -->
					<u-form-item class="wdh-100" label="疾病诊断:" label-width="120" prop="jibing">
						<view class="rowbox info-input spb" style="width: 100%;" @click="addDiseaseDia">
							<view class="reg-pl" v-if="jibing==''">请输入疾病诊断</view>
							<view v-else>{{jibing}}</view>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</u-form-item>
				</view>

				<!-- <view class="columnbox one-info jus">
			        <view class="info-title" style="width: 100%;">医嘱事项（选填）：</view>
			        <textarea auto-height style="font-size: 28rpx;margin-top: 20rpx;" placeholder="请输入医嘱事项"></textarea>
			    </view>
			    <view class="rowbox one-info spb">
			        <view class="columnbox als">
			            <view class="info-title">价格(不含邮费)</view>
			            <view class="info-title" style="width: 450rpx;color: #b1b1b1">以上为参考价格，实际以患者下单为准</view>
			        </view>
			        <view>¥100</view>
			    </view> -->
			</u--form>
		</view>
		<view class="columnbox one-info jus">
			<view class="info-title rowbox spb" style="width: 100%;margin-bottom: 20rpx;">
				<view>Rp：</view>
				<view style="font-weight: normal;color: #b1b1b1 ;">建议用药（限5种）</view>
			</view>
			<view v-for="(item,index) in infoList" :key='index' class="columnbox wdh-100 med-info">
				<view class="rowbox wdh-100 spb med-title">
					<view>
						药品{{index+1}}
					</view>
					<view class="rowbox del-btn" @click="deletMedicine(index)">删除</view>
				</view>
				<view class="rowbox spb med-box" @click="chooseUse(item,index)">
					<image :src="item.image.split(',')[0]" mode="aspectFill" class="m-img"></image>
					<view class="columnbox als m-detail">
						<view class="m-name wdh-100 rowbox spb">
							<view style="width: 300rpx;" class="textovflow">{{item.name}}</view>
							<view class="m-desc" v-if="item.use">x {{item.use.num}}{{item.use.kynuit.name}}</view>
						</view>
						<view class="m-desc">{{item.guige}}</view>
						<view class="m-desc rowbox wdh-100 spb">
							用法用量：
							<text v-if="item.use">
								{{item.use.yongfa.name}};{{item.use.pinci.name}};{{item.use.yongliang}}{{item.use.ylunit.name}};用药{{item.use.daynum}}天
							</text>
							<u-icon name="arrow-right" size="24rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view v-if="infoList.length<5" class="rowbox wdh-100 add-btn" @click="addMedicine">+添加药品</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="rowbox wdh-100 bottom-box">
			<view class="rowbox send-btn wdh-100" @click="submitInfo">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jibing: '',
				infoList: [],
				submitflag: false,
				form: {
					name: '',
					jibing: '',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写模版标题',
						trigger: ['blur', 'change']
					},
					'jibing': {
						type: 'string',
						required: true,
						message: '请填写疾病诊断',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onShow() {
			this.form.jibing = this.jibing
			this.$refs.uForm.clearValidate()
		},
		methods: {
			submitInfo() {
				if (this.infoList.length == 0) {
					uni.showToast({
						title: '请添加药品',
						icon: 'none'
					})
				} else {
					this.$refs.uForm.validate().then(response => {
						if (!this.submitflag) {
							this.submitflag = true
							uni.showLoading({
								title: '保存中'
							})
							let paramer = []
							this.infoList.forEach(res => {
								if (res.use) {
									paramer.push({
										medicineid: Number(res.id),
										yongfa: res.use.yongfa.name,
										pinci: res.use.pinci.name,
										yongliang: res.use.yongliang,
										ylunit: res.use.ylunit.name,
										daynum: Number(res.use.daynum),
										num: Number(res.use.num),
										kynuit: res.use.kynuit.name,
										medicine: res.name,
										image: res.image.split(',')[0],
										guige: res.guige
									})
								}
							})
							this.$req.post('/doctor/yaofangxyadd', {
								doctorid: uni.getStorageSync('uid'),
								name: this.form.name,
								jibing: this.jibing,
								template: 2,
								parameter: JSON.stringify(paramer)
							}).then(res => {
								uni.hideLoading()
								this.submitflag = false
								uni.showModal({
									title: '添加成功',
									success: () => {
										let pages = getCurrentPages(); //获取所有页面栈实例列表
										let nowPage = pages[pages.length - 1]; //当前页页面实例
										let prevPage = pages[pages.length - 2]; //上一页页面实例
										prevPage.$vm.refreshflag = true
										uni.navigateBack()
									}
								})
							})
						}
					}).catch(errors => {})
				}
			},
			chooseUse(v, index) {
				uni.navigateTo({
					url: './useType?info=' + JSON.stringify(v) + '&index=' + index
				})
			},
			deletMedicine(index) {
				this.infoList.splice(index, 1)
			},
			addMedicine() {
				uni.navigateTo({
					url: '/packageA/yaofang/westMedicine/chooseMedicine'
				})
			},
			addTem() {
				uni.navigateTo({
					url: './add'
				})
			},
			addDiseaseDia() {
				uni.navigateTo({
					url: '/packageA/yaofang/westMedicine/diseaseDiagnosis'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F8FB;
		justify-content: flex-start;
		font-family: PingFang SC;
	}

	.info-box {
		margin-bottom: 2rpx;

	}

	.one-info {
		width: 100%;
		padding: 32rpx 32rpx;
		background: #fff;
		border-bottom: #F5F7F9 solid 1px;
		font-size: 26rpx;

		.info-title {
			font-weight: bold;
			font-size: 26rpx;
			color: #202020;
			width: 190rpx;
			margin-right: 20rpx;
		}

		.info-input {
			// width: calc(100% - 210rpx);
			width: 600rpx;
			text-align: left;
			font-size: 26rpx;
		}

		.code-box {
			width: calc(100% - 190rpx);
		}

		.code-input {
			text-align: left;
			font-size: 26rpx;
			width: 200rpx;
		}

		.code-btn {
			font-weight: bold;
		}
	}

	.add-btn {
		margin-top: 40rpx;
		color: #00b6b2;
		border: #00b6b2 solid 1px;
		height: 70rpx;
		border-radius: 10rpx;
	}

	.med-info {
		padding: 20rpx 0;
		border-bottom: #F5F7F9 solid 1px;

		.med-title {
			font-size: 24rpx;
			color: #7e9092;
		}

		.del-btn {
			font-size: 24rpx;
			color: #7e9092;
			border: #7e9092 solid 1px;
			width: 100rpx;
			height: 50rpx;
			border-radius: 10rpx;
		}
	}

	.med-box {
		background: #fff;
		width: 100%;
		padding: 32rpx 32rpx;
		border-bottom: #F5F8FB solid 1px;

		.m-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}

		.m-detail {
			width: calc(100% - 170rpx);
			margin-left: 20rpx;
			height: 150rpx;
			justify-content: space-between;
		}

		.m-name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.m-desc {
			font-size: 24rpx;
			color: #7c7d7d;
		}

		.price-info {
			font-size: 32rpx;
			color: #fc2c21;
			font-weight: bold;
		}

		.stock {
			color: #7c7d7d;
			font-size: 24rpx;
			margin-left: 20rpx;
		}

		.one-btn {
			font-size: 24rpx;
			color: #fff;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			line-height: 40rpx;
		}
	}

	/deep/.u-form-item__body {
		padding: 0;
	}

	/deep/.u-form-item__body__right__message {
		margin-left: 0 !important;
		margin-top: 10rpx;
	}
</style>
<style>
	.reg-pl {
		color: #939BA7;
	}
</style>